<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="500" style="border: 1px solid gray;">

    <!-- <line x1="10" y1="20" x2="10" y2="50" stroke="black"></line>
    <line x1="10" y1="50" x2="40" y2="50" stroke="green"></line>
    <line x1="40" y1="50" x2="40" y2="20" stroke="blue"></line>
    <line x1="40" y1="20" x2="10" y2="20" stroke="yellow"></line> -->

    <!-- <polyline 
      points="60 50, 100 120, 170 70, 60 50" 
      stroke="blue" 
      fill-opacity="0" /> -->

    <!-- <rect 
      x="150" 
      y="160" 
      width="100" 
      height="100" 
      stroke="red" 
      fill-opacity="0"
    /> -->

    <!-- <circle 
      cx="180"
      cy="180"
      r="50"
      fill-opacity="0"
      stroke="black"
      /> -->

      <!-- <ellipse
        cx="600"
        cy="200"
        rx="100"
        ry="200"
        fill-opacity="0"
        stroke="black"
      /> -->

      <!-- <polygon points="150 110, 300 110, 400 310, 200 310"
        fill-opacity="0"
        stroke="black"/> -->

      <path d="
        M 100 100
        L 300 100
        L 150 300
        L 200 20
        L 250 300
        Z
        "
        fill="none" 
        stroke="#000"
      ></path>

  </svg>
  <script>
    /* 
    <svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html> 标签之于一个 web 页面。
    <line> 创建一条直线。
    <polyline> 创建折线。
    <rect> 创建矩形。
    <circle> 创建圆。
    <ellipse> 创建圆和椭圆。
    <polygon> 创建多边形。
    <path> 通过指定点以及点和点之间的线来创建任意形状
    */
  </script>
</body>
</html>